<template>
  <div>
    <div></div>
    <div class="myChart" ref="haha"></div>
    <div class="myChart" ref="haha1"></div>
    <div class="myChart" ref="haha2"></div>
  </div>
</template>

<script>
export default {
  name: "e",
  data: function() {
    return {};
  },
  mounted() {
    this.drawLine();
    this.drawLine1();
    this.drawLine2();
  },
  methods: {
    drawLine: function() {
      console.log(this.$refs.haha);
      let myChart = this.$echarts.init(this.$refs.haha);

      myChart.setOption({
        title: { text: "柱状图" },
        tooltip: {},
        xAxis: {
          data: ["a", "b", "c", "d", "e"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: [1, 2, 3, 4, 5]
          }
        ]
      });
    },
    drawLine2: function() {
      console.log(this.$refs.haha2);
      let myChart = this.$echarts.init(this.$refs.haha2);

      myChart.setOption({
        title: { text: "折线图" },
        tooltip: {},
        xAxis: {
          data: ["a", "b", "c", "d", "e"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      });
    },
    drawLine1: function() {
      console.log(this.$refs.haha);
      let myChart = this.$echarts.init(this.$refs.haha1);

      myChart.setOption({
        title: { text: "饼图" },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            itemStyle: {
              normal: {
                // 阴影的大小
                shadowBlur: 0,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: [
              { value: 400, name: "a" },
              { value: 335, name: "b" },
              { value: 310, name: "c" },
              { value: 274, name: "d" },
              { value: 235, name: "e" }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.myChart {
  width: 300px;
  height: 300px;
}
</style>
